import React, { useState } from 'react';
import { View, FlatList, Text, StyleSheet, Pressable } from 'react-native';

interface Item {
  id: string;
  tag: string;
}

interface HomeTabViewProps {
  items: Item[];
  onSelectedItem: (id: string) => void;
}

const HomeTabView: React.FC<HomeTabViewProps> = ({ items, onSelectedItem }) => {
  const [selectedId, setSelectedId] = useState<string | null>('all');

  const renderItem = ({ item }: { item: Item }) => {
    const isSelected = item.id === selectedId;
    const handlePress = (id: string) => {
      setSelectedId(id);
      onSelectedItem(id);
    };
    return (
      <Pressable
        onPress={() => handlePress(item.id)}
        style={[styles.item, isSelected && styles.selectedItem]}
      >
        <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}} >
            <Text style={[styles.title, isSelected && styles.selectedTitle]}>{item.tag}</Text>
        </View>
      </Pressable>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={items}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        horizontal
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 10,
    marginBottom: 4,
    height: 32,
    width: "100%"
  },
  item: {
    marginHorizontal: 6,
    backgroundColor: 'white',
    borderRadius: 16,
    paddingLeft: 15,
    paddingRight: 15,
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.2)',
  },
  selectedItem: {
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: '#3BC859',
    borderRadius: 20,
    paddingLeft: 15,
    paddingRight: 15,
  },
  title: {
    fontSize: 14,
    color: 'rgba(0,0,0,0.3)',
  },
  selectedTitle: {
    fontSize: 14,
    color: '#3BC859',
  },
});

export default HomeTabView;